<template>
    <el-card shadow="never" body-style="padding:0;">
        <template #header>
            <div class="sl-header">
                <div class="title">表单设计器</div>
                <div>
                    <el-button-group>
                        <!--
                        <el-button icon="upload" :disabled="true" @click="importJson">导入</el-button>
                        <el-button icon="download" :disabled="true" @click="exportJson">导出</el-button>
                        <el-button icon="ticket" :disabled="true" type="warning" @click="generate">生成</el-button>
                        -->
                        <el-button icon="back" type="warning" @click="back">返回</el-button>
                        <el-button icon="checked" type="primary" @click="save">保存</el-button>
                    </el-button-group>
                </div>
            </div>
        </template>
        <div class="sl-designer">
            <div class="sl-content">
                <div class="left">
                    <LeftView ref="leftRef" />
                </div>
                <div class="content">
                    <ContentView ref="contentRef" />
                </div>
                <div class="right">
                    <RightView ref="rightRef" />
                </div>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import ContentView from './commponents/content.vue'
import LeftView from './commponents/left.vue'
import RightView from './commponents/right.vue'
import { getResults, parserResults } from './lib'
import router from '@/routers'
import { watch } from 'vue'

const props = defineProps<{ data: any[] }>()
const emits = defineEmits(['save'])
const save = () => {
    const data = getResults()
    if (data === undefined) return
    emits('save', data)
}

const generate = () => {}
const importJson = () => {}
const exportJson = () => {}
const back = () => {
    router.back()
}

watch(
    () => props.data,
    () => {
        parserResults(props.data)
    },
    { deep: true },
)
</script>

<style scoped lang="scss">
.sl-header {
    display: flex;
    justify-content: space-between;
    .title {
        font-size: 14px;
        font-weight: bold;
    }
}
.sl-designer {
    height: 100%;
}
.sl-content {
    display: flex;
    width: 100%;
    $width: 20%;
    $maxWidth: 350px;
    .left {
        width: $maxWidth;
        max-width: $maxWidth;
        min-width: $maxWidth;
        min-height: 1000px;
    }
    .content {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 0;
        overflow: visible;
        background-color: #e6f7ff;
    }
    .right {
        width: $maxWidth;
        max-width: $maxWidth;
        min-width: $maxWidth;
        height: 100%;
    }
}
</style>
